@btnBorderColor: #dededf;
@btnBorderRadius: 3px;
@btnPrimaryColor: #00aaee;
@btnPrimaryHoverColor: #0198d4;
@btnDefaultColor: #000;
//
.ssy-btn {
    border: 1px solid transparent;
    border-radius: @btnBorderRadius;
    padding: 0.4rem 1.2rem;
    line-height: 1.6;
    text-align: center;
    cursor: pointer;
    font-size: 0.86rem;
    background-color: #fff;
    color: fade(@btnDefaultColor,70%);
    display: inline-block;    
    -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    &:hover,&:focus,&:active {
        background-color: transparent;
        color: @btnPrimaryColor;
        transition: 0.3s;
    }
    &.ssy-btn-text {
        background-color: transparent;
        border: 1px solid transparent;
        color: fade(@btnDefaultColor,60%);
        &:hover,&:focus,&:active {
            color: fade(@btnDefaultColor,80%);
            transition: 0.3s;
        }
    }
    &.circle {
        border-radius: 1.5rem;
    }
    &.ssy-btn-primary {
        background-color: @btnPrimaryColor;
        border: 1px solid @btnPrimaryColor;
        color: #fff!important;
        &:hover,&:focus,&:active {
            background-color: @btnPrimaryHoverColor;
            border: 1px solid @btnPrimaryHoverColor;
            color: #fff!important;
            transition: 0.3s;
        }
        &.ssy-btn-text {
            background-color: transparent;
            border: 1px solid transparent;
            color: @btnPrimaryColor!important;
            &:hover,&:focus,&:active {
                color: @btnPrimaryHoverColor!important;
                transition: 0.3s;
            }
        }
        &.outline {
            background-color: inherit;
            border: 1px solid @btnPrimaryColor;
            color: @btnPrimaryColor!important;
            &:hover,&:focus,&:active {
                background-color: fade(@btnPrimaryColor,10%);
                transition: 0.3s;
            }
        }
    }
    &.ssy-btn-empty {
        color: rgba(0, 0, 0, 0.65);
        background-color: #fff;
        border-color: #dfdfdf;
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
        &:hover,&:focus,&:active {
            text-decoration: none;
            background-color: #fcfcfc;
            border: 1px solid #dfdfdf;
        }
    }
}

.ssy-btn-block {
    width: 100%;
}

.ssy-btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.ssy-btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
}
